<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>宿舍管理系统</title>
    <meta name="renderer" content="webkit">
    <meta name="csrf-token" content="{{ csrf_token() }}"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="{{asset('css/font.css')}}">
    <link rel="stylesheet" href="{{asset('css/xadmin.css')}}">
    <script src="{{asset('lib/layui/layui.js')}}" charset="utf-8"></script>
    <script type="text/javascript" src="{{asset('js/xadmin.js')}}"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="/home">首页</a>
            <a>
              <cite>押金列表</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start"
                                   value="{{old('start')}}">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end"
                                   value="{{old('end')}}">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="staff-card-num" placeholder="请输入员工工牌" autocomplete="off"
                                   class="layui-input" value="{{old('staff-card-num')}}">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="staff-name" placeholder="请输入员工姓名" autocomplete="off"
                                   class="layui-input" value="{{old('staff-name')}}">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <select name="status">
                                <option value="" selected>状态</option>
                                <option value="0" {{old('status')==='0'?'selected':''}}>待收</option>
                                <option value="1" {{old('status')==='1'?'selected':''}}>已收</option>
                                <option value="-1" {{old('status')==='-1'?'selected':''}}>退还</option>
                                <option value="2" {{old('status')==='2'?'selected':''}}>扣除</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search"><i
                                        class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="barDemo">
    @{{# if(d.status==1) { }}
    <a class="layui-btn layui-btn-xs" lay-event="refund">退还</a>
    <a class="layui-btn layui-btn-xs" lay-event="deduct">扣除</a>
    @{{# } }}
    @{{# if(d.status==0) { }}
    <a class="layui-btn layui-btn-xs" lay-event="fetch">收取</a>
    @{{# } }}
</script>
<script>
    layui.use(['table', 'laydate', 'form'], function () {
        $ = layui.jquery;
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
        let b = build_criteria();
        let q = asm_query(b)
        let total =0;
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: `/deposits?${q}`
            , toolbar: 'default'
            , title: '押金列表'
            , cols: [[
                {type: 'checkbox'}
                , {field: 'id', title: 'ID', width: 80, unresize: true, hide: true}
                , {
                    field: 'staff.name', title: '姓名', width: 80, templet: function (d) {
                        return d.staff.name;
                    }
                }
                , {
                    field: 'staff.id_card', title: '身份证', width: 160, templet: function (d) {
                        return d.staff.id_card;
                    }
                }
                , {
                    field: 'staff.card_num', title: '工牌号', width: 100, templet: function (d) {
                        return d.staff.card_num;
                    }
                }
                , {
                    field: 'user.name', title: '经办人', width: 100, templet: function (d) {
                        return d.user?.name||'';
                    }
                }
                , {
                    field: 'deposit_type.name', title: '押金类型', width: 120, templet: function (d) {
                        return d.deposit_type.name;
                    }
                }
                , {
                    field: 'deposit_type.fee', title: '押金', width: 100, templet: function (d) {
                        return d.deposit_type.fee;
                    }
                }
                , {field: 'deposit_date', title: '收取日期', width: 100}
                , {
                    field: 'status', title: '状态', width: 100, templet: function (d) {
                        switch (d.status) {
                            case 0:
                                return '待收';
                            case 1:
                                return '已收';
                            case -1:
                                return '已退';
                            case 2:
                                return '扣除';
                        }
                    }
                }
                , {field: 'remark', title: '备注', width: 150}
                , {field: 'created_at', title: '创建时间', width: 150, sort: true}
                , {field: 'updated_at', title: '更新时间', width: 150, sort: true, hide: true}
                , {fixed: 'right', title: '操作', width: 120, align: 'center', toolbar: '#barDemo'}
            ]]
            , autoSort: false
            , initSort: {field: 'updated_at', type: 'desc'}
            , page: true
            ,limit:20,limits:[20,40,80,160,320,640,1280]
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
        });
        //触发排序事件
        table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            table.reload('test', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    search: b.criteria
                    , searchFields: b.oprt
                    , searchJoin: 'and'
                    , orderBy: obj.field //排序字段
                    , sortedBy: obj.type //排序方式
                },page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id);
            let data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    xadmin.open('添加押金项', '{{route('deposits.create')}}')
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        xadmin.open('更新押金项', `/dorms/${data[0].id}/edit`)
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else if (data.length > 1) {
                            layer.msg('只能同时删除一行');
                        } else {
                            layer.confirm('确认要删除吗？', function (index) {
                                //发异步删除数据
                                del_one(null, data[0].id);
                                layer.close(index);
                                table.reload('test', {});
                            });
                        }
                    }
                    break;
            }
            ;
        });

        let form = layui.form;
        form.on('submit(search)', function (data) {
            b = build_criteria()
            q = asm_query(b)
            table.reload('test', {
                url: '/deposits'
                , where: {
                    search: b.criteria
                    , searchFields: b.oprt
                    , searchJoin: 'and'
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });
    });

    function del_one(obj, id) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: '/buildings/' + id,
            type: 'DELETE',
            dataType: "json",
            success: function () {
                layui.layer.msg(`已删除${id}!`, {icon: 1, time: 1000});
            },
            error: function (err) {
                layui.layer.msg('删除失败', {icon: 2, time: 1000});
            }
        });
    }

    function build_criteria() {
        let start = $("[name='start']").val();
        let end = $("[name='end']").val();
        let staffName = $("[name='staff-name']").val();
        let staffCardNum = $("[name='staff-card-num']").val();
        let status = $("[name='status']").val();

        let criteria = '';
        let oprt = '';
        if (start && end) {
            criteria += `deposit_date:${start},${end};`;
            oprt += 'deposit_date:between;';
        } else {
            if (start) {
                criteria += `deposit_date:${start};`;
                oprt += 'deposit_date:>=;'
            }
            if (end) {
                criteria += `deposit_date:${end};`;
                oprt += 'deposit_date:<=;';
            }
        }
        if (staffName) {
            criteria += `staff.name:${staffName};`;
            oprt += 'staff.name:like;';
        }
        if (staffCardNum) {
            criteria += `staff.card_num:${staffCardNum};`;
            oprt += 'staff.card_num:=;'
        }
        if (status != null) {
            criteria += `status:${status};`;
            oprt += 'status:=;'
        }
        if (criteria) {
            criteria = criteria.slice(0, -1);
            oprt = oprt.slice(0, -1);
        }
        return {criteria,oprt}
    }
    function asm_query(build_criteria,order='updated_at',sort='desc') {
        return `search=${build_criteria.criteria}&searchFields=${build_criteria.oprt}&searchJoin=and&orderBy=${order}&sortedBy=${sort}`
    }

</script>
</html>